<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        <div id="app">
            <!-- 可以在引用子组件时，通过属性绑定(v-bind) 的形式，把需要传递给子组件的
                数据 通过属性绑定传递到子组件内部 -->
            <coml :ads='msg'></coml>
            <count :ads='msg'></count>
        </div>
        <script src="./lib/vue-2.4.0.js"></script>
        <script>
            Vue.component('count',{
                template:'<h1>雷二丫---{{ads}}</h1>',
                props:['ads']
            })
            var vm = new Vue({
                el: '#app',
                data: {
                    msg:'雷大脚'
                },
                methods: {},
                components:{
                    //子组件默认无法访问到父组件的data上的数据和methods的方法
                    coml:{
                        // template:'<h1>雷呲花---{{msg}}</h1>'
                        template:'<h1>雷呲花---{{ads}}----{{add}}</h1>',
                        //把父组件传递过来的数据先在props中定义一下，才可以被子组件调用
                        //props中的数据只能读取，
                        props:['ads'],
                        data(){
                        return {
                            add:'都是雷炮仗'
                        }
                    },

                    }
                }
            })
        </script>
    </body>
</html>